<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>五角星评分案例</title>
    <style>
        body {
            font-family: "simsun";
        }

        .comment {
            font-size: 40px;
            color: #ff1100;
        }

        .comment li {
            float: left;
            cursor: pointer;
        }

        ul {
            list-style: none;
        }
    </style>
    <script src="./jquery-1.11.1.js"></script>
    <script>
        $(function () {
            // 开关变量
            let flag = true
            // 获取索引号
            let index
            $('.comment').on('mouseenter click mouseleave', 'li', function (e) {
                // 鼠标移入当前的和之前的小星星变色
                $(this).text('★').prevAll().text('★')
                $(this).nextAll().text('☆')
                // 判断事件类型是否为点击事件，如果是，则记录当前小li的索引号
                if (e.type == 'click') {
                    flag = false
                    index = $(this).index()
                }
                // 如果为鼠标移出事件并且是点击过后移出鼠标，则小星星颜色不变
                if (!flag && e.type == 'mouseleave') {
                    $('li').eq(index).text('★').prevAll().text('★')
                    $('li').eq(index).nextAll().text('☆')
                }
                // 如果不是鼠标点击事件之后移出鼠标，则全部小星星不变色
                if (flag && e.type == 'mouseleave') {
                    $('li').text('☆')
                }
            })
        })
    </script>
</head>

<body>

    <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>


</body>

</html>